<template>
	<a-form layout="vertical">
		<a-collapse :bordered="false" default-active-key="-1">
			<template #expandIcon="props">
                <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
			</template>
			<a-collapse-panel key="1" :header="gaugeI18n('sizeLocation','仪表盘大小与位置')">
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('radius','仪表盘半径')" >
							<a-input :placeholder="gaugeI18n('radius','仪表盘半径')" type="number" v-model:value="config.styles.gaugeConfig.radius">
                                <template #addonAfter>
                                    <a-select  v-model:value="config.styles.gaugeConfig.radiusSuffix">
                                        <a-select-option value="px">px</a-select-option>
                                        <a-select-option value="%">%</a-select-option>
                                    </a-select>
                                </template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('centreCoordinate','中心坐标')" >
							<a-input placeholder="50%,50%" v-model:value="config.styles.gaugeConfig.centreCoordinate"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('startAngle','仪表盘开始角度')">
							<a-input type="number" v-model:value="config.styles.gaugeConfig.startAngle"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item  :label="gaugeI18n('endAngle','仪表盘结束角度')">
							<a-input type="number" v-model:value="config.styles.gaugeConfig.endAngle"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="2" :header="gaugeI18n('axisCoordinates','仪表盘坐标轴线')">
                <template #extra>
                    <span @click.stop="">
                        <a-switch  size="small" v-model:checked="config.styles.gaugeConfig.showAxis"/>
                    </span>
                </template>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('axisRound','两端显示成圆形')">
							<a-switch size="small" v-model:checked="config.styles.gaugeConfig.axisRound" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('axisWidth','轴线宽度')+'(px)'">
							<a-input-number v-model:value="config.styles.gaugeConfig.axisWidth"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12" v-if="config.chartType=='gaugeChart'">
						<a-form-item :label="gaugeI18n('axisColor','轴线颜色')">
							<a-input v-model:value="config.styles.gaugeConfig.axisColor"  type="color"/>
						</a-form-item>
					</a-col>
					<a-col :span="24" v-else>
						<multicolor-label-config :multicolorLabel="config.styles.gaugeConfig.multicolorLabel"></multicolor-label-config>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="3" :header="gaugeI18n('progress','进度条')" v-if="config.chartType=='gaugeChart'">
                <template #extra>
                    <span @click.stop="">
                        <a-switch  size="small" v-model:checked="config.styles.gaugeConfig.showProgress"/>
                    </span>
                </template>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('axisRound','两端显示成圆形')">
							<a-switch size="small" v-model:checked="config.styles.gaugeConfig.progressRound" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('progressColor','进度条颜色')" >
							<a-input v-model:value="config.styles.gaugeConfig.progressColor"  type="color"/>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('progressWidth','进度条宽度')+'(px)'" >
							<a-input-number v-model:value="config.styles.gaugeConfig.progressWidth"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="4" :header="gaugeI18n('splitLine','分隔线')">
                <template #extra>
                    <span @click.stop="">
                        <a-switch  size="small" v-model:checked="config.styles.gaugeConfig.showSplitLine"/>
                    </span>
                </template>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('splitLineWidth','分隔线长度')" >
							<a-input-number v-model:value="config.styles.gaugeConfig.splitLineWidth"></a-input-number>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('lineDistance','分隔线与轴线的距离')" >
							<a-input-number v-model:value="config.styles.gaugeConfig.lineDistance"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('lineColor','线颜色')" >
							<a-input  v-model:value="config.styles.gaugeConfig.lineColor"  type="color"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('lineWidth','线宽')" >
							<a-input-number v-model:value="config.styles.gaugeConfig.lineWidth"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('numberInstrument','仪表盘刻度的分割段数')" >
							<a-input-number v-model:value="config.styles.gaugeConfig.splitNumber"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="5" :header="gaugeI18n('tickMark','刻度线')">
                <template #extra>
                    <span @click.stop="">
                        <a-switch  size="small" v-model:checked="config.styles.gaugeConfig.showTickMark "/>
                    </span>
                </template>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('splitTickWidth','刻度线长度')" >
							<a-input-number v-model:value="config.styles.gaugeConfig.splitTickWidth"></a-input-number>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('tickDistance','刻度线与轴线的距离')" >
							<a-input-number v-model:value="config.styles.gaugeConfig.tickDistance"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('lineColor','线颜色')" >
							<a-input  v-model:value="config.styles.gaugeConfig.tickColor"  type="color"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('lineWidth','线宽')" >
							<a-input-number v-model:value="config.styles.gaugeConfig.tickWidth"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('segmentsNum','分隔线之间分割的刻度数')">
							<a-input type="number" v-model:value="config.styles.gaugeConfig.segmentsNum"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="6" :header="gaugeI18n('tickLabel','刻度标签')">
                <template #extra>
                    <span @click.stop="">
                        <a-switch  size="small" v-model:checked="config.styles.gaugeConfig.showTickLabel"/>
                    </span>
                </template>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('tickLabelFontSize','刻度标签与轴线的距离')">
							<a-input-number v-model:value="config.styles.gaugeConfig.tickLabelFontSize"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('tickLabelFontColor','文本颜色')" >
							<a-input  v-model:value="config.styles.gaugeConfig.tickLabelFontColor"  type="color"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('tickLabelFontFontSize','文本大小')" >
							<a-input-number v-model:value="config.styles.gaugeConfig.tickLabelFontFontSize"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item  :label="gaugeI18n('minScale','最小刻度')" >
							<a-input type="number" v-model:value="config.styles.gaugeConfig.minScale"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('maxScale','最大刻度')" >
							<a-input type="number" v-model:value="config.styles.gaugeConfig.maxScale"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="24">
						<a-form-item>
                            <template #label>
                                {{chartI18n("common.format","格式化")}}
                                <a-tooltip>
                                    <template #title>
                                      <span style="width:500px;">
                                        {{chartI18n("msa.tooltipTip","提示")}}
                                      </span>
                                    </template>
                                    <QuestionCircleOutlined />
                                </a-tooltip>
                            </template>
							<a-button @click="setFormatter(config.styles.gaugeConfig,'formatter')">{{chartI18n("common.format","格式化")}}</a-button>
							<span v-show="config.styles.gaugeConfig.formatter" style="margin-left:5px;color: #00bb00">
                                <rx-icon-show icon="icon-linedui"></rx-icon-show>
                                {{chartI18n("common.configured","已配置")}}
							</span>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="7" :header="gaugeI18n('title','仪表盘标题')">
                <template #extra>
                    <span @click.stop="">
                        <a-switch  size="small" v-model:checked="config.styles.gaugeConfig.showTitle"/>
                    </span>
                </template>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('titleSeat','标题位置')">
							<a-input v-model:value="config.styles.gaugeConfig.titleSeat"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('titleColor','文字颜色')">
							<a-input  v-model:value="config.styles.gaugeConfig.titleColor"  type="color"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('titleFontSize','文字大小')">
							<a-input-number v-model:value="config.styles.gaugeConfig.titleFontSize"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="8" :header="gaugeI18n('dashboardData','仪表盘数据')">
                <template #extra>
                    <span @click.stop="">
                        <a-switch  size="small" v-model:checked="config.styles.gaugeConfig.showData"/>
                    </span>
                </template>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('dataSeat','数据位置')">
							<a-input v-model:value="config.styles.gaugeConfig.dataSeat"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('titleColor','文字颜色')">
							<a-input  v-model:value="config.styles.gaugeConfig.dataColor"  type="color"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('titleFontSize','文字大小')">
							<a-input-number v-model:value="config.styles.gaugeConfig.dataFontSize"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
						<a-col :span="24">
							<a-form-item>
                                <template #label>
                                    {{chartI18n("common.format","格式化")}}
                                    <a-tooltip>
                                        <template #title>
                                          <span style="width:500px;">
                                            {{chartI18n("msa.tooltipTip","提示")}}
                                          </span>
                                        </template>
                                        <QuestionCircleOutlined />
                                    </a-tooltip>
                                </template>
								<a-button @click="setFormatter(config.styles.gaugeConfig,'dataFormatter')">{{chartI18n("common.format","格式化")}}</a-button>
								<span v-show="config.styles.gaugeConfig.dataFormatter" style="margin-left:5px;color: #00bb00">
                                    <rx-icon-show type="icon-linedui"></rx-icon-show>
                                    {{chartI18n("common.configured","已配置")}}
							</span>
							</a-form-item>
						</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="9" :header="gaugeI18n('pointer','仪表盘指针')">
                <template #extra>
                    <span @click.stop="">
                        <a-switch  size="small" v-model:checked="config.styles.gaugeConfig.showHand"/>
                    </span>
                </template>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('handLength','指针长度')" >
							<a-input v-model:value="config.styles.gaugeConfig.handLength"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('handLength','指针宽度')+'(px)'">
							<a-input-number v-model:value="config.styles.gaugeConfig.handWidth"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('handColor','指针颜色')" >
							<a-input  v-model:value="config.styles.gaugeConfig.handColor"  type="color"/>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
			<a-collapse-panel key="10" :header="gaugeI18n('fixedPoint','指针固定点')">
                <template #extra>
                    <span @click.stop="">
                        <a-switch  size="small" v-model:checked="config.styles.gaugeConfig.showFixedPoint"/>
                    </span>
                </template>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('onPointer','固定点显示在指针上')" >
							<a-switch  size="small" v-model:checked="config.styles.gaugeConfig.onPointer"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('fixedPointSize','固定点大小')" >
							<a-input-number v-model:value="config.styles.gaugeConfig.fixedPointSize"></a-input-number>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24" style="margin: 0px">
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('fixedPointColor','固定点颜色')" >
							<a-input  v-model:value="config.styles.gaugeConfig.fixedPointColor"  type="color"/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item :label="gaugeI18n('fixedLineWidth','线宽度与线颜色')" >
							<div style="display: flex;align-items: center">
                                <a-input-number v-model:value="config.styles.gaugeConfig.fixedLineWidth" style="width: 42%;margin-right: 2px;"></a-input-number>
                                <a-input v-model:value="config.styles.gaugeConfig.fixedLineColor" style="width: 42%" type="color"/>
                            </div>
						</a-form-item>
					</a-col>
				</a-row>
			</a-collapse-panel>
		</a-collapse>
	</a-form>
</template>

<script>
import MulticolorLabelConfig from './multicolor-label-config.vue'
import FormatterDialog from "@/views/modules/design/dialog/formatter-dialog.vue";
import {Util} from "@lowcode/jpaas-base-lib";
export default {
	name: "gauge-config",
	inject:{
		config:{
			default:()=>{
				return {};
			}
		}
	},
	components:{
		MulticolorLabelConfig
	},
	data() {
		return {
			gaugeConfig:{
				radius:75,
				radiusSuffix:"%",
				centreCoordinate:"50%,50%",
				startAngle:225,
				endAngle:-45,
				minScale:0,
				maxScale:1000,
				segmentsNum:10,
				showAxis:true,
				axisRound:false,
				axisColor:"#122A4A",
				axisWidth:20,
				showProgress:true,
				progressRound:false,
				progressColor:"#4285f4",
				progressWidth:20,
				showSplitLine:true,
				splitLineWidth:8,
				lineDistance:10,
				lineColor:"#4285f4",
				lineWidth:2,
				showTickMark:true,
				tickWidth:2,
				splitTickWidth:5,
				tickDistance:10,
				tickColor:"#4285f4",
				tickLabelWidth:"",
				showTickLabel:true,
				tickLabelFontSize:30,
				tickLabelFontColor:"#4285f4",
				tickLabelFontFontSize:12,
				formatter:"",
				titleSeat:"0%,20%",
				showTitle:true,
				titleColor:"#ffffff",
				titleFontSize:12,
				showData:true,
				dataSeat:"0%,0%",
				dataColor:"#ffffff",
				dataFontSize:20,
				dataFormatter:"",
				dataFormatterMode:"template",
				showHand:false,
				handLength:"60%",
				handWidth:6,
				handColor:"#4285f4",
				showFixedPoint:false,
				onPointer:true,
				fixedPointSize:8,
				fixedPointColor:"#555555",
				fixedLineWidth:1,
				fixedLineColor:"#409eff",
				splitNumber:10,
			},
			multicolorGaugeConfig:{
				radius:75,
				radiusSuffix:"%",
				centreCoordinate:"50%,50%",
				startAngle:225,
				endAngle:-45,
				minScale:0,
				maxScale:100,
				segmentsNum:10,
				showAxis:true,
				axisRound:false,
				axisColor:"#E6EBF8",
				axisWidth:22,
				showProgress:true,
				progressRound:true,
				progressWidth:"18",
				showSplitLine:true,
				splitLineWidth:8,
				lineDistance:10,
				lineColor:"#95BBF4",
				lineWidth:2,
				showTickMark:true,
				tickWidth:1,
				splitTickWidth:4,
				tickDistance:10,
				tickColor:"#95BBF4",
				tickLabelWidth:"",
				showTickLabel:true,
				tickLabelFontSize:30,
				tickLabelFontColor:"#95BBF4",
				tickLabelFontFontSize:12,
				titleSeat:"0%,20%",
				showTitle:true,
				titleColor:"#ffffff",
				titleFontSize:12,
				showData:true,
				dataSeat:"0%,70%",
				dataColor:"#81C784",
				dataFontSize:22,
				dataFormatter:"",
				dataFormatterMode:"template",
				showHand:true,
				handLength:"50%",
				handWidth:2,
				handColor:"#4285f4",
				showFixedPoint:true,
				onPointer:true,
				fixedPointSize:20,
				fixedPointColor:"#030E1C",
				fixedLineWidth:1,
				fixedLineColor:"#81C784",
				multicolorLabel:[{
					value:30,
					color:'#4285f4'
				},{
					value:70,
					color:'#81c784'
				},{
					value:100,
					color:'#ffb74d'
				}],
				splitNumber:10,
			},
		}
	},
	created() {
		//单色
		if(this.config.chartType=="gaugeChart" && !this.config.styles.gaugeConfig){
            this.config.styles["gaugeConfig"]=this.gaugeConfig;
		}
		//多色
		if(this.config.chartType=="multiColorGauge" && !this.config.styles.gaugeConfig){
            this.config.styles["gaugeConfig"]=this.multicolorGaugeConfig;
		}
	},
	methods: {
		gaugeI18n(name,text,key){
			return this.$ti18(name,text,"gaugeChartLang",key);
		},
		chartI18n(name,text,key){
			return this.$ti18(name,text,"chartLang",key);
		},
		setFormatter(axisConfig,type){
			let self=this;
			let conf = {
				component: FormatterDialog,
				curVm: this,
				widthHeight: ['1200px', '600px'],
				title: this.chartI18n('common.format','格式化')+"(JavaScript)",
				data: {
					axisConfig: axisConfig,
					defaultFormatter:"return value;",
					show:true,
					type:type,
				},
                zIndex:999,
			}
			Util.open(conf, function (action,data) {
				if(action!="ok"){
					return;
				}
                axisConfig[type]=data.formatter;
                axisConfig[type+'Mode']=data.formatterMode;
			})
		}
	},
	watch: {}
}
</script>

<style scoped>
</style>
